<template>
  <div class="encymed">
    <div class="center">
      <ul class="entitle">
        <li>中</li>
        <li>药</li>
        <li>方</li>
        <li>大</li>
        <li>全</li>
      </ul>
      <el-carousel
        :interval="5000"
        arrow="always"
        class="center"
        height="550px"
      >
        <el-carousel-item v-for="item in 4" :key="item">
          <div class="box" v-for="(item, index) in encban" :key="index">
            <div class="boxtop">
              <img :src="item.thumb" />
            </div>
            <div class="boxbtm">
              <h5>{{ item.title }}</h5>
              <p class="shaji">
                {{ item.content }}
                <router-link
                  :to="{ name: 'Encymed_details', params: { id: item.id } }"
                  class="xiang"
                  >[详细]</router-link
                >
              </p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Encymed",
  props: {},
  data() {
    return {
      encban: [
        // {
        //   image: require("../assets/index4.png"),
        //   title: "沙棘油养生套盒",
        //   content:
        //     "中药是以中国传统医药理论指导采集炮制、制剂，说明作用机理，指导临床应的多，故有“诸药以草中药是以中国传统医药理论指导采集炮制、炮制、制剂，说明作用机理,指导临床应的多，故有...",
        //   url: "/Encymed_details",
        //   xqing: "[详细]",
        // },
        // {
        //   image: require("../assets/index4.png"),
        //   title: "沙棘油养生套盒",
        //   content:
        //     "中药是以中国传统医药理论指导采集炮制、制剂，说明作用机理，指导临床应的多，故有“诸药以草中药是以中国传统医药理论指导采集炮制、炮制、制剂，说明作用机理,指导临床应的多，故有...",
        //   url: "/Encymed_details",
        //   xqing: "[详细]",
        // },
        // {
        //   image: require("../assets/index4.png"),
        //   title: "沙棘油养生套盒",
        //   content:
        //     "中药是以中国传统医药理论指导采集炮制、制剂，说明作用机理，指导临床应的多，故有“诸药以草中药是以中国传统医药理论指导采集炮制、炮制、制剂，说明作用机理,指导临床应的多，故有...",
        //   url: "/Encymed_details",
        //   xqing: "[详细]",
        // },
        // {
        //   image: require("../assets/index4.png"),
        //   title: "沙棘油养生套盒",
        //   content:
        //     "中药是以中国传统医药理论指导采集炮制、制剂，说明作用机理，指导临床应的多，故有“诸药以草中药是以中国传统医药理论指导采集炮制、炮制、制剂，说明作用机理,指导临床应的多，故有...",
        //   url: "/Encymed_details",
        //   xqing: "[详细]",
        // },
      ],
    };
  },
  created() {
    //接收id
    let that = this;
    // let id1 = that.$router.history.current.query.id;
    // console.log(id1);
    //通过id请求
    axios
      .post("/index/zhongyiyao")
      .then((res) => {
        // that.encban = res.data.data;

        // for (let i = 0; i < res.data.data.length - 1; i++) {
        //   this.encban.push(res.data.data[i]);

        // }
        that.encban = res.data.data;
        // console.log(res.data.data.length);
        // for (let i = 0; i < res.data.data.length - 1; i++) {
        //   this.encban.push(res.data.data[i]);
        //   console.log(this.encban);
        // }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style scoped>
.encymed {
  background: url("../assets/bg2.png") no-repeat;
  padding: 3rem 0;
}
.entitle {
  width: 450px;
  margin: 1rem auto;
  overflow: hidden;
}
.entitle li {
  float: left;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: #fff;
  border-radius: 40px;
  margin-right: 10px;
}
.el-carousel {
  margin-top: 2rem;
  width: 100%;
}
.el-carousel__item {
  display: flex;
  justify-content: space-between;
}

.el-carousel__item .box {
  width: 25%;
  color: #475669;
  font-size: 16px;
  opacity: 0.75;
  margin: 0;
}
.el-carousel__arrow {
  background-color: none;
  font-size: 20px;
}
.el-carousel__container {
  width: 100%;
}
.boxtop img {
  float: left;
  width: 100%;
  margin: 0;
  transition: all 0.6s;
}
.boxtop img:hover {
  float: left;
  width: 100%;
  margin: 0;

  /* margin-left: 5%; */
  transform: scale(1.1);
}
.boxbtm {
  width: 87%;
  margin: 0 auto;
  background: #fff5ee;
  border-radius: 15px;
  margin-top: 21rem;
}
.boxbtm h5 {
  font-size: 20px;
  text-align: center;
  padding: 1rem 0;
  color: #a25642;
}
.boxbtm .shaji {
  text-indent: 2rem;
  line-height: 1.6rem;
  padding: 0 10px;
  padding-bottom: 1rem;
}
.boxbtm .shaji .xiang {
  width: 100%;
  color: #b0533c;
  font-weight: 550;
  margin-left: 2%;
}
</style>
